export function createShader(gl, src, type) {
  /**
   * threejs 以材质类型创建 program shader
   * 在渲染时选用对于的材质类型program 重新填充 模型数据和材质数据
   * 一种类型的材质创建一个  program shader
   * linkProgram 只用执行一次
   * useProgram 在切换材质渲染时都要使用
   * attachShader 也只在初始化时需要使用
   *
   * getAttribLocation  bufferData vertexAttribPointer 只在创建Geometry时调用，不知道时怎么切换模型渲染的
   * 同一种类型的物体position normal 数据是一样的 使用不同的矩阵getUniformLocation来实现大小和位置变换
   * 如果物体类型不一样那么索引（indices）不一样，drawElements 使用不同的索引数组长度则可以画不用的物体
   * gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
   * // 绑定第二个物体的顶点位置缓冲区这样也可以切换drawElements的物体
   * gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer2);=>gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
   */
  const shader = gl.createShader(type)
  gl.shaderSource(shader, src)
  gl.compileShader(shader)

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error(`Error compiling shader: ${gl.getShaderInfoLog(shader)}`)
  }
  return shader
}

export function createTexture(gl, width, height, arrayBuffer) {
  // 创建一个纹理对象
  const texture = gl.createTexture()
  gl.bindTexture(gl.TEXTURE_2D, texture) // 选择当前纹理
  // 设置属性
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  // 设置纹理参数
  // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
  // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
  // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
  // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
  // 分配纹理存储空间
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, arrayBuffer)
  // gl.generateMipmap(gl.TEXTURE_2D);
  // 取消选择
  gl.bindTexture(gl.TEXTURE_2D, null)
  return texture
}
export function createFramebuffer(gl, texture) {
  // 创建一个帧缓冲对象
  const framebuffer = gl.createFramebuffer()
  // gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)

  // 将纹理关联到帧缓冲的颜色附件
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)

  // 检查帧缓冲是否完整
  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER)
  if (status !== gl.FRAMEBUFFER_COMPLETE) {
    console.error('Framebuffer is incomplete:', status)
  }

  return framebuffer
}

export function renderSceneToTexture(gl, width, height, renderFunction) {
  // 创建纹理和帧缓冲
  const texture = createTexture(gl, width, height)
  const framebuffer = createFramebuffer(gl, texture)

  // 清除帧缓冲（如果需要）
  gl.clearColor(0.0, 0.0, 0.0, 1.0) // 设置清除颜色为黑色
  gl.clear(gl.COLOR_BUFFER_BIT)

  // 绑定帧缓冲进行渲染
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)

  // 调用提供的渲染函数来渲染场景到纹理
  renderFunction()

  // 渲染完成后，解除帧缓冲绑定
  gl.bindFramebuffer(gl.FRAMEBUFFER, null)

  // 返回渲染到的纹理
  return texture
}

// 使用示例
function myRenderFunction() {
  // 这里是你的WebGL渲染代码，比如设置视图矩阵、投影矩阵、绘制调用等
  // ...
}

// const texture = renderSceneToTexture(gl, width, height, myRenderFunction);
// // 现在你可以将texture用于其他用途，比如作为材质贴图或显示在屏幕上
